<template>
	<div class="ranker">
		<div class="rankingList">
		<p><b>云音乐新歌榜</b></p>
		<div class="moreSongList">更多歌单</div>
		</div>
			<div class="newSongBox" v-for="(item,index) in newestMusicList.slice(0,6)" :key="index">
				<img :src="item.al.picUrl" alt="">
				<p v-for="(it,idx) in item.ar" :key="idx">{{it.name}}</p>
				<p>{{item.name}}</p>
			</div>
		<div class="bownlineation"></div>
		<!-- 云音乐飙升榜 -->
		<!-- <div class="rankingList">
		<p><b>云音乐飙升榜</b></p>
		<div class="moreSongList">更多歌单</div>
		</div>
		 <div class="newSongBox" v-for="(item,index) in hotSongMusicList.slice(0,6)" :key="index">
			<img :src="item.al.picUrl" alt="">
			<p v-for="(it,idx) in item.ar" :key="idx">{{it.name}}</p>
			<p>{{item.name}}</p>
		</div> 
		<div class="bownlineation"></div> -->
		
	</div>
</template>

<script>
	export default {
		data() {
			return {
				newestMusicList: [],
				hotSongMusicList:[],
				// originalMusicList:[]
			}
		},
		created(){
			this.axios({
				url: "/top/list?idx=0"
			}).then(res => {
				// window.console.log(res)
				this.newestMusicList = res.data.playlist.tracks;
			});
			// this.axios({
			// 	url: "/top/list?idx=3"
			// }).then(res => {
			// 	this.hotSongMusicList = res.data.playlist.tracks;
			// });
		},
	}
</script>

<style lang="scss" scoped>
.ranker{
	.rankingList{
		width: 100%;
		margin-top: 5px;
		height: 35px;
		position: relative;
		display: flex;
		justify-content: space-between;
		p{
			font-size: 15px;
			text-align: left;
			margin-left: 8px;
			line-height: 35px;
		}
		.moreSongList{
			width: 65px;
			height: 20px;
			float: right;
			font-size: 13px;
			line-height: 20px;
			margin: 6px 5px 0 0;
			border-radius: 10%;
			border: 0.5px solid #000000;
		}
	}
	.newSongBox{
		float: left;
		width: 120px;
		height: 160px;
		margin:0 2.5px 0 2.5px;
		img{
			width: 100%;
		}
		p{
			float: left;
			margin: 0 5px 0 5px;
			font-size: 12px;
		}
	}
	.bownlineation{
		margin-top: 320px;
		position: relative;
		border: 0.5px solid skyblue;
	}
}

</style>
